<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <title>RealHouseManagement</title>
        <script src="../Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
		 <script src="../Scripts/json2.js" type="text/javascript"></script>
        <script type="text/javascript">
            jQuery(function(){
                var start=0;
                var skip=20;
                var current=1;
                   load(start,skip);
			   
                function load( start,skip){
                    $.post("/RealHouse/HouseInfoAll",{} , function(data){
                        var data=$.parseJSON(data);
                        var end=start+skip;
                        var total=data.length/skip;
                        total=Math.floor(total)+1;
                        $("#Total").html("共"+total+"页    ");
                        $("#Current").html("当前第"+current+"页    ");
                        if(end>data.length)
                        {
                            end=data.length;
                        }
                        else
                        {
                            
                        }                  
                        for(var i=start;i<end;i++)
                        {
                            $("<tr>"
                                +"<td class='HID'>"+data[i].HID+"</td>"
                                +"<td>"+data[i].location+"</td>"
                                +"<td>"+data[i].premise+"</td>"
                                +"<td>"+data[i].housePrice+"</td>"
                                +"<td>"+data[i].type+"</td>"
                                +"<td>"+data[i].area+"</td>"
                                +"<td>"+data[i].floor+"</td>"
                                +"<td>"+data[i].arrow+"</td>"
                                +"</tr>").appendTo($("#House"));                     
                        
                        }
                    }).complete(function(){
                   
                        $("#State2").fadeIn(1200);
                        
                        $("#House td").click(
                        function(){
                            var de=$("<td><button class='de'>删除</button></td>");
                            de.click(function(){
                                var p=$(this).parent();
                                $(this).remove();
                                p.appendTo($("#House")) ;  
                                
                            });
                            
                            var inputobj = $("<input type='text' class='text' >"); 
                            //获取当前点击的单元格对象 
                            var tdobj = $(this); 
                            //获取单元格中的文本 
                            var text = tdobj.html(); 
                            //如果当前单元格中有文本框，就直接跳出方法 
                            //注意：一定要在插入文本框前进行判断 
                            if(tdobj.children("input").length>0){ 
                                return false; 
                            } 
                            //清空单元格的文本 
                            tdobj.html(""); 
                            inputobj.css("border","2px solid") 
                            .css("font-size",tdobj.css("font-size")) 
                            .css("font-family",tdobj.css("font-family")) 
                            .css("background-color",tdobj.css("background-color")) 
                            .css("color","#C75F3E") 
                            .width(tdobj.width()) 
                            .val(text) 
                            .appendTo(tdobj); 
                            inputobj.get(0).select(); 
                            //阻止文本框的点击事件 
                            inputobj.click(function(){ 
                                return false; 
                            }); 
                            //处理文本框上回车和esc按键的操作 
                            //jQuery中某个事件方法的function可以定义一个event参数，jQuery会屏蔽浏览器的差异，传递给我们一个可用的event对象 
                            inputobj.keyup(function(event){ 
                                //获取当前按键的键值 
                                //jQuery的event对象上有一个which的属性可以获得键盘按键的键值 
                                var keycode = event.which; 
                                //处理回车的情况 
                                if(keycode==13){ 
                                    //获取当前文本框的内容 
                                    var inputtext = $(this).val(); 
                                    //将td的内容修改成文本框中的内容 
                                    tdobj.html(inputtext);  
                                    tdobj.parent().append(de).appendTo($("#NewHouse"));
                                     $("#NewHouse td").not(de).unbind("click");                                   
                                    $("#NewHouse").show(500);
                                } 
                                //处理esc的情况 
                                if(keycode == 27){ 
                                    //将td中的内容还原成text 
                                    tdobj.html(text); 
                                } 
                            }); 
                            inputobj.blur(function(){
                                var inputtext = $(this).val(); 
                                tdobj.parent().append(de).appendTo($("#NewHouse"));
                                tdobj.html(inputtext);  
                                $("#NewHouse td").not(de).unbind("click");
                                $("#NewHouse").show(500);
                                return false;
                            });
                        }); 
                        $(".HID").unbind("click");
                    });}
                $("#Save").click(function(){
                    var tr=$("#NewHouse tr");
                    var j= tr.length-1;
                    var Houses =new Array();
                    tr=tr.next();
                    for(var i=0;i<j;i++)
                    {
                        var td= tr.find("td");
                        var HID=td.html()
                        var Location =td.next().html();
                        td=td.next();
                        var Premise =td.next().html();
                        td=td.next();
                        var Price=td.next().html();
                        td=td.next();
                        var Type=td.next().html();
                        td=td.next();
                        var Area=td.next().html();
                        td=td.next();
                        var Floor=td.next().html();
                        td=td.next();
                        var Arrow=td.next().html();
                        var House=
                            {
                            "HID":HID,
                            "Location":Location,
                            "Premise":Premise,
                            "Price":Price,
                            "Type":Type,
                            "Area":Area,
                            "Floor":Floor,
                            "Arrow":Arrow
                        };
                        Houses.push(House);
                        tr=tr.next();
                    }                             
        $.post("/RealHouse/HouseUpadate",JSON.stringify(Houses),function(){
                     $.post("/RealHouse/UpdataCcahe",function(data){
					 var data=data;
                    alert(data);
                })
                })
            });
            $("#NextPage").click(function(){
                start=start+skip;
                current++;
                $("#bar").fadeOut(200);
                $("#House").fadeOut(400,function(){
                    $("#House td").remove();
                    $("#House tr").next().remove();                                   
                    load(start,skip);
                    $("#House").fadeIn(500);
                    $("#bar").fadeIn(400);
                });                  
                    
            });
            $("#PrePage").click(function(){
                if(current>1)
                {
                    start=start-skip;
                    current--;
                    $("#bar").fadeOut(200);
                    $("#House").fadeOut(400,function(){
                        $("#House td").remove();
                        $("#House tr").next().remove();                                   
                        load(start,skip);
                        $("#House").fadeIn(500);
						$("#NewHouse").fadeIn(500);
                    });                  
                }
            });
			
			  
         
        });
                
        </script>
        <link href="../CSS/HouseUpdate.css" rel="stylesheet" type="text/css" />
    </head>
    <body>

        


        <div id="State2">

            <h3>RealHouseMangement</h3>
            <br>
                <div id="Table">
                    <table  id="House">
                        <tr>
                            <th>HID</th>
                            <th>位置</th>
                            <th>地址</th>
                            <th>价格</th>
                            <th>户型</th>
                            <th>面积</th>
                            <th>楼层</th>
                            <th>朝向</th>
                        </tr> 
                        <tbody>

                        </tbody>
                    </table>
                    <br>
                        <div id="bar">
                            <a id="Total" ></a>
                            <a id="Current" ></a>
                            <a id="PrePage" >  上一页</a>
                            <a id="NextPage" >  下一页</a>

                            <br>
                                <br>
                                    <h3>修改项</h3>
                                    <br>
                                        <table  id="NewHouse">
                                            <tr>
                                                <th>HID</th>
                                                <th>位置</th>
                                                <th>地址</th>
                                                <th>价格</th>
                                                <th>户型</th>
                                                <th>面积</th>
                                                <th>楼层</th>
                                                <th>朝向</th>
                                                <th>删除</th>
                                            </tr> 
                                            <tbody></tbody>
                                        </table>
                                        <br>
                                            <br>
                                                <button id="Save" >保存

                                                </button>
                                                </div>
                                                </div>

                                                </div>
                                                </body>
                                                </html>